<template>
	<view class="page">
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="carousel">
			<swiper-item v-for="(item,index) in bannerList">
				<image @click="gotoDetail" :data-kId="index" key="index" :src="item" mode="" class="carousel" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		
		<!-- 热门超英 -->
		<view class="page-block super-hot">
			<view class="hot-title-wapper">
				<image src="https://img0.baidu.com/it/u=4254772190,2146170776&fm=26&fmt=auto&gp=0.jpg" class="hot-ico" mode="aspectFill"></image>
				<view class="hot-title">
					热门超英
				</view>
			</view>
			
			<scroll-view scroll-x="true" class="page-block hot">
				<view class="single-poster" v-for="(hot,index) in hotList">
					<view class="poster-wapper">
						<image @click="gotoDetail" :data-kId="index" key="index" :src="hot.url" class="poster"></image>
						<view class="movie-name">
							{{hot.title}}
						</view>
						<trailerStars :score="hot.score" showScore="1"></trailerStars>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<!-- 热门预告 -->
		<view class="page-block super-hot">
			<view class="hot-title-wapper">
				<image src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1809484157,3825201317&fm=26&gp=0.jpg" class="hot-ico"></image>
				<view class="hot-title">
					热门预告
				</view>
			</view>
			<view class="page-block hot-movies">
				<video 
				v-for="(movie,index) in movieList" 
				:src="movie.trailer"
				:poster="movie.poster"
				class="hot-movie-single"
				controls></video>
			</view>
		</view>
		
		<!-- 猜你喜欢 -->
		<view class="page-block like">
			<view class="hot-title-wapper">
				<image src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1809484157,3825201317&fm=26&gp=0.jpg" class="hot-ico"></image>
				<view class="hot-title">
					猜你喜欢
				</view>
			</view>
			
			<view  :key="index" v-for="(like,index) in likeList" class="page-block like-wapper">
				<image @click="gotoDetail" :data-kId="index" class="like-img" :src="like.img" mode="aspectFill"></image>
				<view class="like-info">
					<view class="like-title">{{like.title}}</view>
					<trailerStars :score="like.score" showScore="1"></trailerStars>
					<view class="like-desc">{{like.info}}</view>
					<view class="like-desc">{{like.time}}</view>
				</view>
				<view class="like-oper"  @click="likeMe(index)">
					<image class="like-ico" src="https://img2.baidu.com/it/u=1141391546,4111065160&fm=26&fmt=auto&gp=0.jpg"></image>
					<view class="like-me">赞一下</view>
					<view :animation="animationDataArr[index]" class="like-me animation-opacity">+1</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import trailerStars from '../../components/trailerStars.vue'
	export default {
		components:{
			trailerStars
		},
		data() {
			return {
				bannerList: [
					"https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF",
					"https://t7.baidu.com/it/u=1831997705,836992814&fm=193&f=GIF",
					"https://t7.baidu.com/it/u=2851687453,2321283050&fm=193&f=GIF"
				]
				,hotList: [
					{
						url:"https://img0.baidu.com/it/u=3033541366,2843962344&fm=26&fmt=auto&gp=0.jpg",
						title: "钞能力者-蝙蝠侠",
						score: 8.9
					},
					{
						url:"https://img1.baidu.com/it/u=488054824,781673712&fm=26&fmt=auto&gp=0.jpg",
						title: "钞能力者-蝙蝠侠",
						score: 10
					},
					{
						url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2F07.imgmini.eastday.com%2Fmobile%2F20171120%2F05415e07d23d1e06f670ef29aef618a9.gif&refer=http%3A%2F%2F07.imgmini.eastday.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625840692&t=65cdbd1de9a02ed41a00b14378f64da3",
						title: "钞能力者-蝙蝠侠",
						score: 9.1
					},
					{
						url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn12%2F752%2Fw690h862%2F20180529%2Ff5e9-hcffhsu8839550.jpg&refer=http%3A%2F%2Fn.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625840692&t=f7002b4c9a82c7185a629c87825eac79",
						title: "钞能力者-蝙蝠侠",
						score: 2.2
					},
					{
						url:"https://img2.baidu.com/it/u=1943521773,1045531091&fm=26&fmt=auto&gp=0.jpg",
						title: "钞能力者-蝙蝠侠",
						score: 5.0
					},
				]
				,movieList : [
					{
						name:"钞能力：蝙蝠侠",
						trailer:"https://media.w3.org/2010/05/sintel/trailer.mp4",
						poster:"https://img2.baidu.com/it/u=1776766142,680351088&fm=26&fmt=auto&gp=0.jpg",
					},
					{
						name:"钞能力：蝙蝠侠2",
						trailer:"http://www.w3school.com.cn/example/html5/mov_bbb.mp4",
						poster:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.huabanimg.com%2F328dd45b9f95d8703e200d13775e7f041f0ad1b933139f-uVeg0l_fw658&refer=http%3A%2F%2Fhbimg.huabanimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625896173&t=6ad7023b0584993fdf39ade34704f5f0",
					}
					
				]
				,likeList: [
					{
						title: "复仇者联盟",
						score: 9.1,
						info: "2018/美国/科幻/超级英雄",
						time: "上映时间：2012-05-05（中国大陆）",
						img: "https://img1.baidu.com/it/u=488054824,781673712&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						title: "复仇者联盟2",
						score: 7.1,
						info: "2018/美国/科幻/超级英雄",
						time: "上映时间：2012-05-05（中国大陆）",
						img: "https://img2.baidu.com/it/u=1804272601,468942649&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						title: "复仇者联盟3",
						score: 6.1,
						info: "2018/美国/科幻/超级英雄",
						time: "上映时间：2012-05-05（中国大陆）",
						img: "https://img0.baidu.com/it/u=3753972264,2197167502&fm=26&fmt=auto&gp=0.jpg"
					},
					{
						title: "复仇者联盟4",
						score: 7.1,
						info: "2018/美国/科幻/超级英雄",
						time: "上映时间：2012-05-05（中国大陆）",
						img: "https://img2.baidu.com/it/u=1809948875,2289979830&fm=26&fmt=auto&gp=0.jpg"
					}
				]
				,animationData : {}
				,animationDataArr:[]
			}
		},
		onLoad() {
			// uni.request({
			// 	url:'https://www.imovietrailer.com/superhero/index/carousel/list',
			// 	method:"POST",
			// 	success: res=>{
			// 		console.log(res);
			// 	}
			// })
			
			// 1 在页面创建的时候，创建一个临时动画对象
			this.animation = uni.createAnimation();
			this.animationDataArr=Array(this.likeList.length).fill({});
			
		},
		onUnload(){
			// 5 页面卸载的时候，清除动画数据
			this.animationData = {};
			this.animationDataArr=Array(this.likeList.length).fill({});
		},
		onPullDownRefresh(){
			this.refData();
			setTimeout(function(){
				uni.stopPullDownRefresh();
			},800)
			
		},
		methods: {
			likeMe(index){
				
				// var index = e.currentTarget.dataset.index;
				
				console.log('index-->',index)
				// 2 调用 step() 来表示一组动画完成
				this.animation.translateY(-80).opacity(1).step({
					duration: 400
				});
				
				// 3 通过动画实例的export方法导出动画数据传递给组件的animation属性
				this.animationData = this.animation;
				this.animationDataArr[index] = this.animationData.export();
		   
				// 4 还原动画
				setTimeout(()=> {
					this.animation.translateY(0).opacity(0).step({
						duration: 0
					});
					this.animationData = this.animation;
					this.animationDataArr[index] =  this.animationData.export();
				}, 600)
				
			}
			,refData(){
				console.log('refData')
			},
			gotoDetail(e){
				var k = e.currentTarget.dataset.kId;
				
				uni.navigateTo({
					url:"../movie/movie?kId="+k
					
				})
				
			}
		}
	}
</script>

<style>
	@import url("index.css");
</style>
